<template>
	<view>
		<view class="uni-container">
			<uni-row class="demo-uni-row" :gutter="gutter">
				<uni-col :span="5" :xs="21" >
					<uni-forms-item name="activityId" label="宝贝姓名" labelWidth='70'>
						<uni-easyinput v-model="searchPar.keyword" :clearable="false" placeholder="请输入宝贝姓名" />
					</uni-forms-item>
				</uni-col>
				<uni-col :span="6" :xs="24">
					<uni-forms-item name="classId" label="选择班级" labelWidth='70'>
						<uni-data-select
						     newText="班级"
						     v-model="searchPar.classIndex"
						     :localdata="range"
						     @change="changeClass"
						 ></uni-data-select>
					</uni-forms-item>
				</uni-col>
				<uni-col :span="6" :xs="24">
					<uni-forms-item name="classId" label="检测类型" labelWidth='70'>
						<uni-data-select
						     newText="类型"
						     v-model="searchPar.typeIndex"
						     :localdata="rangeType"
						     @change="changeIndex"
						 ></uni-data-select>
					</uni-forms-item>
				</uni-col>
				<uni-col :span="10" :xs="24">
					<uni-forms-item name="userBirthday" label="日期范围" labelWidth='70'>
					   <uni-datetime-picker v-model="searchPar.data"  type="daterange" @maskClick="maskClick" />
					</uni-forms-item>
				</uni-col>
				<uni-col :span="5" :xs="20">
					<button class="uni-button" style="min-width: 110px;height: 36px;line-height: 36px;" type="primary" size="mini"  @click="search">查询</button>
					<button class="uni-button" style="min-width: 80px;height: 36px;line-height: 36px;margin-left: 10px;" type="default" size="mini"  @click="resetting">重置</button>
				</uni-col>
			</uni-row>
			<uni-table ref="table" :loading="loading" border stripe  emptyText="暂无更多数据" @selection-change="selectionChange">
				<uni-tr>
					<uni-th width="50" align="center">序号</uni-th>
					<uni-th width="150" align="center">宝贝姓名</uni-th>
					<uni-th width="150" align="center">所在班级</uni-th>
					<uni-th width="150" align="center">检测日期</uni-th>
					<uni-th width="150" align="center">检测时间</uni-th>
					<uni-th width="150" align="center">检测类型</uni-th>
					<uni-th width="150" align="center">体温(℃)</uni-th>
					<uni-th width="150" align="center">手部</uni-th>
					<uni-th width="150" align="center">口腔</uni-th>
					<uni-th width="150" align="center">红眼</uni-th>
					<uni-th width="150" align="center">流涕</uni-th>
					<uni-th width="150" align="center">指甲</uni-th>
					<uni-th width="150" align="center">腮部</uni-th>
					<uni-th width="150" align="center">精神</uni-th>
					<uni-th width="150" align="center">咳嗽</uni-th>
					<uni-th width="150" align="center">外伤</uni-th>
					<uni-th width="150" align="center">其他</uni-th>
					
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{index+1}}</uni-td>
					<uni-td align="center">{{ item.name }}</uni-td>
					<uni-td align="center">{{ item.class }}</uni-td>
					<uni-td align="center">{{ item.date }}</uni-td>
					<uni-td align="center">{{ item.time }}</uni-td>
					<uni-td align="center">{{ item.type }}</uni-td>
					<uni-td align="center">{{ item.temperature }}</uni-td>
					<uni-td align="center">{{ item.hand }}</uni-td>
					<uni-td align="center">{{ item.mouth }}</uni-td>
					<uni-td align="center">{{ item.eye }}</uni-td>
					<uni-td align="center">{{ item.nasalMucus }}</uni-td>
					<uni-td align="center">{{ item.fingernail }}</uni-td>
					<uni-td align="center">{{ item.spirit }}</uni-td>
					<uni-td align="center">{{ item.cheeks }}</uni-td>
					<uni-td align="center">{{ item.cough }}</uni-td>
					<uni-td align="center">{{ item.trauma }}</uni-td>
					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary" @click="edit(item)">修改</button>
							<!-- <button class="uni-button" size="mini" type="warn">删除</button> -->
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
		</view>
	</view>
</template>
<script>
	import {
		  pageClass,
		} from '@/api/class.js'
export default {
	data() {
		return {
			searchPar: {
				keyword:'',
				classIndex:'',
				typeIndex:'',
				data:["2021-03-8", "2021-4-20"],
			},
			tableData: [
				{
					name: '王晓琳',
					class: '小一班',
					date:'2023-03-20',
					time:'10:00',
					type:'',
					temperature:'36',
					hand:'',
					handImg:'http://img.duoziwang.com/2018/06/2018010130213221.jpg',
					mouth:'',
					mouthImg:'',
					eyeImg:'',
					eye:'',
					nasalMucus:'1',//鼻涕
					fingernail:"0",//指甲
					cheeks:'0',//腮部
					spirit:'0',//精神
					cough:'0',//咳嗽
					trauma:'0',//外伤
				},
				
			],
			// 每页数据量
			pageSize: 10,
			// 当前页
			pageCurrent: 1,
			// 数据总量
			total: 0,
			loading: false,
			gutter:40,
			range:[],
			rangeType:[
				{value:0,
				text:'晨检'},{
					value:1,
					text:'午检'
				}
			],
			
			
		};
	},
	onLoad() {
		this.selectedIndexs = [];
		this.getData(1);
		this.pageClass();
	},
	methods: {
		edit(it){
		console.log('it',it)
			uni.navigateTo({
				url:'edit?info='+JSON.stringify(it)
			})
		},
		changeIndex(e){
			this.typeIndex=e
		},
		maskClick(e){
			console.log('33333333======',e)
			this.searchPar.date = e;
		},
		resetting(){
			this.searchPar={}
			
		},
		// 多选处理
		selectedItems() {
			return this.selectedIndexs.map(i => this.tableData[i]);
		},
		// 多选
		selectionChange(e) {
			console.log(e.detail.index);
			this.selectedIndexs = e.detail.index;
		},
		//批量删除
		delTable() {
			console.log(this.selectedItems());
		},
		// 分页触发
		change(e) {
			this.$refs.table.clearSelection();
			this.selectedIndexs.length = 0;
			this.getData(e.current);
		},
		// 搜索
		search() {
			console.log('查询条件',this.searchPar)
			this.getData(1, this.searchPar);
		},
		// 获取数据
		getData(pageCurrent, value = '') {
			this.loading = true;
			this.pageCurrent = pageCurrent;
			this.request({
				pageSize: this.pageSize,
				pageCurrent: pageCurrent,
				value: value,
				success: res => {
					// console.log('data', res);
					this.tableData = res.data;
					this.total = res.total;
					this.loading = false;
				}
			});
		},
		// 伪request请求
		request(options) {
			const { pageSize, pageCurrent, success, value } = options;
			let total = this.tableData.length;
			let data = this.tableData.filter((item, index) => {
				const idx = index - (pageCurrent - 1) * pageSize;
				return idx < pageSize && idx >= 0;
			});
			if (value) {
				data = [];
				this.tableData.forEach(item => {
					if (item.name.indexOf(value) !== -1) {
						data.push(item);
					}
				});
				total = data.length;
			}

			setTimeout(() => {
				typeof success === 'function' &&
					success({
						data: data,
						total: total
					});
			}, 500);
		},
		changeClass(e){
			this.classIndex=e
			 console.log("e:", e);
		},
		pageClass(){
			pageClass({pageSize: 100}).then(
				res => {
					if (res.data.code=='0') {
					if(res.data.data.list.length){
						res.data.data.list.forEach(bg=>{
							this.range.push({text:bg.className,value:bg.id});
						})
						console.log('班级获取',this.range)
						this.searchPar.classIndex = this.range[0].value;
						}else{
							// this.$api.showTip(res.data.msg)
						}
					}
					
				},
				err => {
					this.$api.showTip('服务器错误')
				}
			);		
		},
	}
};
</script>
<style lang="scss">
/* #ifndef H5 */
/* page {
	padding-top: 85px;
} */
/* #endif */
.uni-group {
	display: flex;
	align-items: center;
}
.demo-uni-row {
			margin-bottom: 10px;
			padding-left: 20px;
			// 组件在小程序端display为inline
			// QQ、字节小程序文档写有 :host，但实测不生效
			// 百度小程序没有 :host
			/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
			display: block;
			/* #endif */
		}
		.uni-stat__select{
			padding: 0px !important;
			
		}
		.uni-stat__select>.uni-select{
		 width: -webkit-fill-available !important;
		 padding-left: 10px;
		  font-size: 14px;
		}
		.uni-stat__select>.uni-select__input-text {
			width: 100%;
		}
		
		/deep/.uni-select__input-text[data-v-6b64008e] {
		    width: 191px;
		    color: #333;
			font-size: 26rpx;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    -o-text-overflow: ellipsis;
		    overflow: hidden;
		}
		/deep/.uni-select{
			background-color: #fff;
		}
	
</style>
